<template>
  <main-content title="任务记录">
    <template #search-bar>
      <search-bar>
        <template #normal>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户ID">
            <el-input v-model="searchForm.userUnionId" placeholder="请输入客户ID" clearable></el-input>
          </el-form-item>
          <el-form-item label="任务名称">
            <el-input v-model="searchForm.taskName" placeholder="请输入任务名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select v-model="searchForm.status" clearable placeholder="请选择任务状态">
              <el-option v-for="(item, index) in taskStatus" :label="item.label" :value="item.value" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <!--          <ins-cascader-filter @change="(insId) => searchForm.insId = insId"></ins-cascader-filter>-->

          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <!-- TODO 加权限 -->
            <el-button type="primary" @click="showExportData = true">导出</el-button>
          </el-form-item>
        </template>
      </search-bar>
    </template>

    <layout-table :setSearch="setSearch" url="/merchant/task/user/pageTaskUserInfo" :param="searchForm">
      <el-table-column label="任务名称" prop="taskName" min-width="180"></el-table-column>
      <el-table-column label="任务描述" prop="taskDescription" min-width="200"></el-table-column>
      <el-table-column label="任务来源" prop="relationType" width="150">
        <template #default="scope">
          {{ getTaskRelationLabel(scope.row.relationType) }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone" width="120"></el-table-column>
      <el-table-column label="客户ID" prop="userUnionId" width="120"></el-table-column>
      <el-table-column label="任务状态" prop="status" width="120">
        <template #default="scope">
          {{ getStatusLabel(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="领取时间" prop="createTime" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="完成时间" prop="finishTime" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.finishTime) }}
        </template>
      </el-table-column>
    </layout-table>
    <exportData v-model:show-dialog="showExportData" :search-data="searchForm" title="任务记录" export-type="taskUserExport">
    </exportData>
  </main-content>
</template>
<script lang="ts">
export default {
  name: "TaskRecord",
};
</script>
<script lang="ts" setup>
import exportData from "@/components/exportData/exportData.vue";
import { UnwrapNestedRefs, Ref } from "vue";
import { getTaskCategory, getTaskList } from "@/api/taskCenter";
import {
  ITaskCategoryItem,
  ITaskListData,
  ITaskListItem,
  ITaskRecordData,
} from "@/api/modules/taskCenter";
import { useTaskType } from "@/views/taskCenter/compositions/useTaskType";
import moment from "moment";
import CategoryEditDialog from "@/views/taskCenter/components/CategoryEditDialog.vue";
import { useTaskRelation } from "@/views/taskCenter/compositions/useTaskRelation";
import { useTaskStatus } from "@/views/taskCenter/compositions/useTaskStatus";
import { useTaskOnlineStatus } from "@/views/taskCenter/compositions/useTaskOnlineStatus";

const router = useRouter();
const route = useRoute();

const setSearch = ref(0)


const { getTaskRelationLabel } = useTaskRelation();
const { taskStatus, getStatusLabel } = useTaskStatus();
const { taskOnlineStatus } = useTaskOnlineStatus();
const showExportData = ref(false);
const searchForm: UnwrapNestedRefs<ITaskRecordData> = reactive<ITaskRecordData>({
  taskName: "",
  phone: "",
  userUnionId: "",
  status: null,
  // insId: null, // 所属机构
});

// // 任务状态筛选条件
// const taskStatus = ref([{
//   label: '启用',
//   value: 1,
// }, {
//   label: '停用',
//   value: 0
// }])

const formatTime = (value: number) => {
  return value ? moment(value).format("YYYY-MM-DD HH:mm:ss") : "";
};

const checkQuery = () => {
  const { taskName } = route.query;
  if (taskName) {
    searchForm.taskName = <string>taskName;
  }
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    checkQuery();
  },
  {
    deep: true,
  }
);

const search = () => {
  ++setSearch.value
}

onMounted(() => {
  checkQuery();
});
</script>

<style scoped lang="scss"></style>
